

import React,{FC,useState,useEffect,useRef} from 'react'
import {useSearchParams,useNavigate,useLocation} from 'react-router-dom'
import { Table,Form,Input,Button,Tag, Tooltip,Drawer,DrawerProps,Space,Modal,Pagination  } from 'antd'
import { produce } from 'immer'
import {getAssetInfo} from '@/api/asset'

import AssetDetail from '../AssetDetail'

import PaginationList from '@/components/PaginationList'
import useLoadAssetInfoData from '@/hooks/useLoadAssetInfoData'
import { useRequest} from 'ahooks'
import AssetSearch from '../AssetSearch'
import AssetStatus from '../AssetStatus'

  
 
const AssetInfo:FC = ()=>{
 
    const DrawerRef = useRef<{showLargeDrawer:()=>void;}>() // 子组件
    const [assetInfo,setAssetInfo] = useState([])
    const [pageTotal,setPageTotal] = useState(0)
    const [searchParams] = useSearchParams()
  
  // 获取资产信息
  const {run} = useRequest(async ()=>{
    const search = searchParams.get('search') || ""
    const page = parseInt(searchParams.get('page') || "1")
    const pageSize = parseInt(searchParams.get('size') || "10")
    const res = await getAssetInfo({pageIndex:page,pageSize,search})
    return res
  },{
      manual:true,
      onSuccess:(data)=>{
        setAssetInfo(data?.data?.list)
        setPageTotal(data?.data?.total)
      }
  })

  // 首次，和params改变时重新获取数据
  useEffect(()=>{
      run()
  },[searchParams])

    // 资产表格
    const columns = [
      {
        title: '域名',
        dataIndex: 'url',
        key: 'url',
        render:(_,{url})=>{
          return (
            <div>
              <a href={url} target="_blank" rel="noreferrer">{url}</a>
            </div>
          )
        }
      },
      {
        title: 'ip',
        dataIndex: 'ip',
        key: 'ip',
        render:(_,{ip})=>{
          return (
            <div>
              <a href={ip} target="_blank" rel="noreferrer">{ip}</a>
            </div>
          )
        }
      },
      {
        title: '端口',
        dataIndex: 'port',
        key: 'port',
      },
      {
          title: '服务类型',
          dataIndex: 'type',
          key: 'type',
        },
        {
          title:"标题",
          dataIndex:"title",
          key:"title",
          render:(_,{title,icon})=>{
            
            
            return (
              <div>
              <img src={`data:image/png;base64,${icon}`} alt="" style={{width:"25px"}} />
              <span style={{marginLeft:"5px"}}>{title}</span>
              </div>
            )
        

          }
        },
        {
          title: '状态码',
          dataIndex: 'status',
          key: 'status',
        },
        {
          title: 'banner',
          dataIndex: 'banner',
          key: 'banner',
          render:(_,{banner}:any)=>{
            return (
              <div style={{ maxWidth:"500px",overflow:'hidden'}}>
                <span>{banner}</span>
              </div>
            )
          }
        },
        {
          title: '应用组件',
          dataIndex: 'products',
          key: 'products',
          render:(_,{products}:any)=>{          
            return (
              <div>
                <Tag color="success">{products[0]}</Tag>
                <Tooltip placement="rightTop" title={products.map((item:any)=><span>{item} <br/></span> )} arrow={{ pointAtCenter: true}}>
                <Tag color='default'>共{products.length}个组件</Tag>
                </Tooltip>
                
              </div>
            )
            
          }
        },
        {
          title: '时间',
          dataIndex: 'time',
          key: 'time',
        },
        {
          title: '操作',
          render:(_:any,{id}:any)=>{
            return (
              <div>
                <Space>
                  <Button  type="primary" onClick={()=>{DrawerRef.current && DrawerRef.current.showLargeDrawer(id)}}>详情</Button>
                  <Button type="primary" danger>删除</Button>
                </Space>
                
              </div>
            )
          }

        },
    ];

    return (
        <div >
            <AssetSearch assetInfo={assetInfo} />
            <AssetStatus assetCount={pageTotal}/>
            <div> 
              <Table dataSource={assetInfo} columns={columns} pagination={false} />
              <PaginationList total={pageTotal} />
            </div>
      {/* 资产详情 */}
        <AssetDetail ref={DrawerRef} />
      </div>
    )
}

export default AssetInfo